<template>
  <div class="data-center-wrapper" v-loading="itemLoading">
    <div class="left-wrapper">
      <div class="title">数据板块</div>
      <div class="">
        <el-checkbox-group
          @change="handleChange"
          :max="max"
          v-model="checkedList"
        >
          <vuedraggable
            @change="handleOrderChange"
            class="list-wrapper"
            v-model="list"
            :move="move"
          >
            <div
              @click="handleClick(item)"
              class="items"
              v-for="item in list"
              :key="item.id"
            >
              <div
                :class="{ active: active === item.id }"
                class="label-wrapper flex align-center justify-between"
              >
                <div @click.stop>
                  <el-checkbox :disabled="item.type === 'map' && checkedList.length >= 8 && !item.checked" style="width: " :label="item.id"></el-checkbox>
                  <span @click="handleClick(item)" class="title">{{
                    item.title
                  }}</span>
                </div>

                <img
                  style="width: 18px; height: 18px"
                  src="@/assets/images/sort.png"
                  alt=""
                />
              </div>
              <div
                v-if="active === item.id"
                v-loading="item.loading"
                class="data-wrapper"
              >
                <div class="btn-wrapper">
                  <div
                    :class="item.dataType === 1 ? 'active' : ''"
                    @click.stop="changeDataType(item, 1)"
                  >
                    真实
                  </div>
                  <div
                    :class="item.dataType === 2 ? 'active' : ''"
                    @click.stop="changeDataType(item, 2)"
                  >
                    虚拟
                  </div>
                </div>
                <div class="flex" style="margin-top: 10px">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column
                      prop="name"
                      label="数据名称"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column prop="value" align="center" label="数据值">
                    </el-table-column>
                  </el-table>
                  <span
                    :class="{ disabled: item.dataType === 1 }"
                    class="edit"
                    @click.stop="handleEdit(item)"
                    >修改</span
                  >
                </div>
              </div>
            </div>
          </vuedraggable>
        </el-checkbox-group>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="flex align-center top-wrapper justify-between">
        <div></div>
        <span>预览效果</span>
        <div>
          <el-button @click="showHistoryLink = true" type="" round size="small"
            >历史链接</el-button
          >
          <el-button
            @click="showGenerator = true"
            type="primary"
            round
            size="small"
            >生成链接</el-button
          >
        </div>
      </div>
      <div class="view-wrapper">
        <template v-for="(item) in checkListMap">
          <div
            class="items"
            :class="item.type === 'map' ? 'items-map' : ''"
            v-if="item.title"
            :key="item.id"
          >
            <div class="title-wrapper">
              <p>{{ item.title }}</p>
            </div>
            <div
              v-loading="item.loading"
              element-loading-background="rgba(0, 0, 0, 0.6)"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              v-if="item.type != 'number'"
              :id="'chart' + item.id"
              class="chart"
            ></div>
            <div
              v-else
              v-loading="item.loading"
              element-loading-background="rgba(0, 0, 0, 0.6)"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              class="transaction-wrapper"
            >
              <div class="total-wrapper">
                <div class="number">
                  {{
                    item.dataType === 2
                      ? item.staticData.find((item) => item.name === "总计")
                          .value
                      : item.dynamicData.find((item) => item.name === "总计")
                          .value
                  }}
                </div>
                <div class="text">总交易额</div>
              </div>
              <div class="sub-wrapper flex align-center justify-between">
                <div class="flex align-center">
                  <img src="@/assets/images/rocket.png" />
                  <div>
                    <div class="flex">
                      <span class="text">今日配送金额</span>
                    </div>
                    <div class="number">
                      {{
                        item.dataType === 2
                          ? item.staticData.find((item) => item.name === "今日")
                              .value
                          : item.dynamicData.find(
                              (item) => item.name === "今日"
                            ).value
                      }}
                    </div>
                  </div>
                </div>
                <div class="flex align-center">
                  <img src="@/assets/images/rocket.png" />
                  <div>
                    <div class="flex">
                      <span class="text">本月配送金额</span>
                    </div>
                    <div class="number">
                      {{
                        item.dataType === 2
                          ? item.staticData.find((item) => item.name === "本月")
                              .value
                          : item.dynamicData.find(
                              (item) => item.name === "本月"
                            ).value
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <el-dialog
      title="编辑数据"
      :visible.sync="showEdit"
      class="main_dialog dialog450"
      @close="showEdit = false"
    >
      <div style="position: relative">
        <table
          class="data-table"
          style="
            border-collapse: separate;
            border-spacing: 30px 10px;
            width: 100%;
            text-align: center;
          "
        >
          <tr>
            <th>数据名称</th>
            <th>数值</th>
          </tr>
          <tr v-for="(item, index) in dataOption" :key="index">
            <td>
              <el-input
                maxlength="8"
                :disabled="tempTarget.title === '总交易额'"
                style="width: 120px"
                v-model="item.name"
              ></el-input>
            </td>
            <td>
              <el-input
                maxlength="30"
                style="width: 120px"
                v-model="item.value"
              ></el-input>
            </td>
            <td
              v-if="tempTarget.title !== '总交易额'"
              @click="handleDelete(index)"
              :class="{ disabled: dataOption.length <= 1 }"
              style="cursor: pointer; color: #f56c6c"
            >
              删除
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button
          v-if="tempTarget && tempTarget.title !== '总交易额'"
          @click="add"
          type="primary"
          >添加</el-button
        >
        <el-button type="primary" @click="handlConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible="showGenerator"
      class="main_dialog"
      :class="viewUrl ? 'dialog650' : 'dialog450'"
      title="生成链接"
      @close="
        showGenerator = false;
        viewUrl = null;
      "
    >
      <div v-loading="loading" class="flex align-center justify-around">
        <span>{{ viewUrl ? "链接有效期" : "预览链接" }}</span>
        <el-input v-if="!viewUrl" min="1" style="width: 150px" v-model="hour">
          <template slot="append">小时</template>
        </el-input>
        <div v-else>{{ viewUrl }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="!viewUrl" @click="generateUrl"
          >确 定</el-button
        >
        <el-button
          type="primary"
          class="copy"
          v-else
          :data-clipboard-text="viewUrl"
          @click="copyUrl(viewUrl)"
          >复制链接</el-button
        >
      </span>
    </el-dialog>
    <el-drawer
      title="历史链接"
      :visible.sync="showHistoryLink"
      @open="getShareUrl"
      direction="rtl"
      size="35%"
    >
  
      <div v-loading="historyLoading" class="link-list-wrapper">
        <template v-if="historyLink.length !== 0">
          <el-table
          :data="historyLink">
          <el-table-column
            align="center"
            prop="url"
            label="链接">
          </el-table-column>
          <el-table-column
            align="center"
            prop="expire_time"
            label="过期时间">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class='btn-wrapper'>
                <span @click="copyUrl(scope.row.url)">复制</span>
                <span @click="deleteLink(scope.row)">删除</span> 
              </div>
            </template>
          </el-table-column>
          </el-table>
        </template>
        <div v-else style='text-align:center;color:#666'>暂无数据</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import * as analysisApi from "@/api/analysis/analysis";
import { generateChart } from "./modules/generateChart";
import formatData from "./modules/formatData";
import vuedraggable from "vuedraggable";
import moment from 'moment'
import apiMapping from "./modules/apiMapping";
export default {
  components: {
    vuedraggable
  },
  mixins: [generateChart],
  data() {
    return {
      max: 9,//最大可选数
      itemLoading: true,//首次加载loading
      historyLoading: false, //历史链接加载状态
      historyLink: [],//历史链接列表
      showHistoryLink: false, //历史链接显示状态
      loading: false, //全局加载状态
      showGenerator: false, //生成链接对话框显示状态
      viewUrl: "", //预览链接
      hour: "4", //过期时间 单位:小时
      tempTarget: null,
      showEdit: false, //编辑数据对话框显示状态
      active: null, //当前展开的数据板块id
      checkedList: [], //已勾选的数据板块id
      checkListMap: [], //已勾选的数据板块对象
      dataOption: [], //编辑数据对话框中的数据项
      list: [
        //数据板块对象
        {
          title: "总交易额", //数据板块名称
          type: "number", //图表类型
          dataType: 1, //数据类型
          staticData: [
            //虚拟数据
            {
              name: "今日",
              value: "123567",
            },
            {
              name: "本月",
              value: "405000.58",
            },
            {
              name: "总计",
              value: "5994100",
            },
          ],
          id: 1,
        },
        {
          title: "客户地域分布",
          type: "map",
          dataType: 1,
          staticData: [
            {
              name: "南昌",
              value: "111,111",
            },
          ],
          id: 2,
        },
        {
          title: "近一年交易额概况",
          type: "line",
          dataType: 1,
          staticData: [
            {
              name: "1月",
              value: "333",
            },
            {
              name: "2月",
              value: "456",
            },
            {
              name: "3月",
              value: "654",
            },
            {
              name: "4月",
              value: "866",
            },
            {
              name: "5月",
              value: "1100",
            },
            {
              name: "6月",
              value: "879",
            },
            {
              name: "7月",
              value: "678",
            },
            {
              name: "8月",
              value: "456",
            },
            {
              name: "9月",
              value: "888",
            },
            {
              name: "10月",
              value: "999",
            },
            {
              name: "11月",
              value: "666",
            },
            {
              name: "12月",
              value: "343",
            },
          ],
          id: 3,
        },
        {
          title: "各地区合作客户分布",
          type: "pie",
          dataType: 1,
          staticData: [
            {
              name: "江西",
              value: 36,
            },
            {
              name: "湖南",
              value: 36,
            },
            {
              name: "安徽",
              value: 36,
            },
            {
              name: "福建",
              value: 24,
            },
            {
              name: "重庆",
              value: 32,
            },
          ],
          id: 4,
        },
        {
          title: "合作客户类型占比",
          type: "pie",
          colorType:2,
          // type: "bar",
          // colorType:4,
          dataType: 1,
          staticData: [
            {
              name: "测试数据",
              value: 100,
            },
          ],
          id: 5,
        },
        {
          title: "合作客户交易额TOP10",
          type: "bar",
          colorType:1,
          dataType: 1,
          staticData: [
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
          ],
          id: 6,
        },
        {
          title: "合作客户订单量TOP10",
          type: "bar",
          dataType: 1,
          colorType:5,
          staticData: [
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
          ],
          id: 7,
        },
        {
          title: "标准分类销量分布",
          type: "pie",
          dataType: 1,
          id: 8,
          staticData: [
            {
              name: "江西",
              value: 36,
            },
            {
              name: "湖南",
              value: 36,
            },
            {
              name: "安徽",
              value: 36,
            },
            {
              name: "福建",
              value: 24,
            },
            {
              name: "重庆",
              value: 32,
            },
          ],
        },
        {
          title: "标准库商品销量TOP10",
          type: "bar",
          dataType: 1,
          colorType:2,
          staticData: [
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
          ],
          id: 9,
        },
        {
          title: "标准库商品交易额TOP10",
          type: "bar",
          colorType:3,
          dataType: 1,
          staticData: [
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
            {
              name: "测试数据1",
              value: 100,
            },
            {
              name: "测试数据2",
              value: 200,
            },
          ],
          id: 10,
        },
      ],
      tableData: [],
    };
  },
  created() {
    // this.saveData()
    this.init()
  },
  methods: {
    deleteLink(item){
      this.historyLoading = true
      analysisApi.deleteLink({
        prefix:item.url.split('/')[5]
      }).then(res=>{
        this.$message.success('删除成功')
        this.getShareUrl()
      })
    },
    move({draggedContext}){
      if(!draggedContext.element.checked){
        return false
      }
      if(draggedContext.element.type === 'map' && draggedContext.futureIndex >= 6){
        return false
      }
    },
    init(){
      analysisApi.getSort({}).then((res) => {
        this.itemLoading = false;
        //先从接口获取数据 没有就获取默认数据
        this.list = (res.data.data && res.data.data.length  === 0 ) ? this.list : res.data.data;
        this.list.forEach((item) => { //还原之前选中的状态
          if (item.checked) {
            this.checkedList.push(item.id);
          }
        });


        this.handleChange(true); //生成图表

        this.list
          .filter((item) => item.dataType === 1)
          .forEach((item) => {
            //为dataType为真实的选项加载数据
            if (apiMapping[item.title]) {
              this.changeDataType(item, 1,true);
            }
          });
      });
    },
    saveData() {
      analysisApi.saveData({
        data: JSON.stringify(this.list),
        type: 13,
        status: 1,
      });
    },
    getShareUrl() {
      this.historyLoading = true;
      analysisApi.getShareUrl().then((res) => {
        res.data.forEach(item=>{
          item.url = window.location.origin + "/#/viewData/" + item.url.split("/")[4]
          item.expire_time = moment(item.expire_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        })
        this.historyLink = res.data
        this.historyLoading = false;
      });
    },
    copyUrl(text) {
      const dom = document.createElement("input");
      dom.value = text;
      document.body.appendChild(dom);
      dom.select();
      document.execCommand("copy");
      document.body.removeChild(dom);
      this.$message.success("复制成功");
      this.viewUrl = "";
      this.showGenerator = false;
    },
    generateUrl() {
      //生成链接
      if (this.checkListMap.length === 0) {
        this.$message.warning("请先选择数据板块");
        return;
      }
      this.loading = true;
      const result = this.list.filter((item) => this.checkedList.indexOf(item.id) !== -1);
      analysisApi.generateUrl({
        data: JSON.stringify(result),
        hour: this.hour,
        type: 12,
        status: 1,
      }).then((res) => {
        this.viewUrl = window.location.origin + "/#/viewData/" +res.data.share_url.split("/")[4];
        this.loading = false;
      });
    },
    changeDataType(item, i, flag) { //数据类型切换处理函数
      item.dataType = i; //更改对应数据板块的dataTye
      if (i === 1) { //对真实数据的处理
        const chart = this["chart" + item.id]; //根据数据板块id生成对应的echarts对象
        item.loading = true; //开启加载动画
        apiMapping[item.title] && apiMapping[item.title]().then((res) => {//请求对应接口
          if (res.data && res.data.data) { //容错
            formatData(item, res); //数据格式化
            if(!flag){
              this.tableData = item.dynamicData; //改变table里面的数据
            }
            chart && this.generateChart(item); //生成图表
          } else {
            this.$message.warning("暂无真实数据");
            item.dataType = 2;
          }
        })
        .finally(() => {
          item.loading = false; //关闭加载动画
          this.$forceUpdate();
        });
      } else if (i === 2) {//对虚拟数据的处理
        //如果虚拟数据被改过则获取之前的staticData否则就获取dynamicData 如果dynamicData没有就获取默认的staticData
        this.tableData = item.isEdited ? item.staticData : item.dynamicData ? item.dynamicData : item.staticData;
        this["chart" + item.id] && this.generateChart(item); //生成图表
      }
      !flag && this.saveData(); //保存数据板块状态
    },
    handleDelete(i) {
      if (this.dataOption.length <= 1) return; //如果还剩一个数据就不能继续删除
      this.dataOption.splice(i, 1);
    },
    handleEdit(item) {//处理数据修改
      if (item.dataType === 1) return; //如果item数据类型为真实 则不处理

      //设置编辑数据对话框中的数据 如果虚拟数据被改过则获取之前的staticData否则就获取dynamicData 如果dynamicData没有就获取默认的staticData

      this.dataOption = item.isEdited ? JSON.parse(JSON.stringify(item.staticData)) : (item.dynamicData ? JSON.parse(JSON.stringify(item.dynamicData)) : JSON.parse(JSON.stringify(item.staticData)))

      this.tempTarget = item; //保存当前对象
      this.showEdit = true; //显示 编辑数据 对话框
    },
    handlConfirm() {//确认修改处理函数 此时dataType一定为2

      const staticData = this.tempTarget.staticData || [];
      const dataOption = this.dataOption;

      //对比动态数据和默认数据之间有没有发生改变
      if (dataOption.length !== staticData.length) {
        this.tempTarget.isEdited = true;
      } else {
        for (let prop in dataOption) {
          if (dataOption[prop].name !== staticData[prop].name || dataOption[prop].value !== staticData[prop].value) {
            this.tempTarget.isEdited = true;
            break;
          }
        }
      }

      //改变table里的数据
      this.tableData = this.dataOption;
      //保存静态数据
      this.tempTarget.staticData = this.dataOption;

      //判断是否为总交易额 并生成图表
      if ( this.tempTarget.type != "number" && this["chart" + this.tempTarget.id]) {
        this.generateChart(this.tempTarget);
      }

      //保存数据板块状态
      this.saveData();
      this.showEdit = false; //关闭 编辑数据 对话框
    },
    add() {//动态添加数据项
      this.dataOption.push({
        name: "",
        value: "",
      });
    },

    handleOrderChange(e) {//处理顺序变化
      e = e.moved;
      if(e.element.type === 'map' && e.newIndex >= 6){
        this.$message.warning("无法移动到此处")
        this.checkListMap = this.checkListMap
        this.$forceUpdate()
        return
      }

      this.checkListMap.splice(e.oldIndex, 1); //先删除被移动的元素
      this.checkListMap.splice(e.newIndex, 0, e.element); //再把元素添加到被移动的位置


      this.saveData(); //保存数据板块状态
    },
    handleChange() { //checkbox change
      //删除所有echarts对象
      this.list.forEach((item) => {
        delete this["chart" + item.id];
      });

      //获取已选中的数据板块
      this.checkListMap = this.list.map((item) => {
        const flag = this.checkedList.indexOf(item.id) === -1;
        item.checked = !flag; //记录元素是否被选中
        return flag ? {} : item;
      });


      this.saveData(); //保存数据板块状态

      this.checkListMap.forEach((item) => {//生成图表
        if (item.id && item.checked) {
          this.$nextTick(() => {
            if (item.type != "number") {
              this.generateChart(item);
            }
          });
        }
      });

      if(this.checkedList.indexOf(2) !== -1){ //最多可选控制
        this.max = 8
      }else{
        this.max = 9
      }

    },
    handleClick(item) {//数据板块的展开
      this.active = item.id === this.active ? null : item.id; //保存当前选中的数据板块
      if (this.active) { //判断是展开还是收起
        if (item.dataType === 1) { //真实数据
          this.tableData = item.dynamicData || []; //设置table数据为dynamicData
          this.changeDataType(item, 1);
        } else { //虚拟数据
          this.tableData = item.staticData
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.main_dialog .el-dialog__body {
  min-height: unset;
}

/deep/.el-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-icon-loading {
    color: #3fb1e3;
  }
  .el-loading-text {
    color: #fff;
    margin-left: 5px;
  }
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #4fa388;
  border-color: #4fa388;
  box-shadow: -1px 0 0 0 #4fa388;
}

/deep/.el-radio-button__orig-radio:hover + .el-radio-button__inner {
  color: #4fa388;
}
/deep/.el-checkbox__label {
  display: none;
}

.flex {
  display: flex;
}
.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

.link-list-wrapper {
  color: #333;
  padding: 0 20px;
  height: 100%;
  .btn-wrapper {
    span {
      font-size: 14px;
      cursor: pointer;
    }
    span:first-child {
      color: #4fa388;
      margin-right: 10px;
    }
    span:last-child {
      color: #f56c6c;
    }
  }
}

.data-center-wrapper {
  padding: 15px;
  display: flex;
  height: calc(100vh - 125px);

  .left-wrapper::-webkit-scrollbar {
    width: 0 !important;
  }
  .left-wrapper {
    z-index: 2;
    display: inline-block;
    padding-top: 20px;
    width: 420px;
    height: calc(100vh - 125px);
    overflow-x: scroll;
    box-sizing: border-box;
    background: #ffffff;
    text-align: center;
    box-shadow: 4px 0 5px -3px rgba(0, 0, 0, 0.2);
    // padding-right:calc(100vw - 100% + 1rem);
    .title {
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      font-family: Source Han Sans CN;
    }
    .list-wrapper {
      margin-top: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .items {
        width: 100%;
        .label-wrapper {
          padding: 15px;
          .title {
            text-align: left;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            margin-left: 15px;
            color: #333333;
            cursor: default;
          }
        }
        .active {
          background: #ebebeb;
        }
        .data-wrapper {
          font-size: 14px;
          padding: 10px 15px;
          .edit {
            transition: all linear 0.3s;
          }

          .btn-wrapper {
            border: 1px solid #efefef;
            border-radius: 10px;
            overflow: hidden;
            width: 200px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            div {
              padding: 10px 20px;
              width: 50%;
              cursor: pointer;
              color: #666;
            }
            div:hover {
              color: #4fa388;
            }
            .active {
              background: #4fa388;
              color: #fff;
            }
            .active:hover {
              color: #fff;
            }
          }
          span {
            writing-mode: vertical-rl;
            text-align: left;
            margin-left: 5px;
            cursor: pointer;
            color: #4fa388;
          }
        }
      }
    }
  }
  .content-wrapper {
    width: 100%;
    padding: 0 10px;
    background: #fff;
    box-sizing: border-box;
    .top-wrapper {
      background: #fff;
      padding: 15px;
      span {
        font-size: 24px;
        font-weight: 500;
        color: #333333;
      }
    }
    .view-wrapper {
      background: rgb(38, 53, 116);
      width: 100%;
      padding: 10px;
      height: 100%;
      display: grid;
      grid-template-columns:repeat(3,33.3%);
      grid-template-rows:repeat(3,31.5%);
      .transaction-wrapper {
        position: absolute;
        padding: 15px;
        height: calc(100% - 38px);
        width: 100%;
        overflow: hidden;
        .number {
          background: linear-gradient(0deg, #76c0ff 0%, #5dd7ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: 800;
        }
        .total-wrapper {
          border: 1px solid rgb(52, 108, 172);
          margin: 0px 30px;
          text-align: center;
          padding: 10px;
          .number {
            font-size: 2.3rem;
            margin-bottom: 10px;
          }
          .text {
            color: #fff;
            font-size: 22px;
            font-weight: 800;
          }
        }
        .sub-wrapper {
          margin-top: 20px;
          color: #fff;
          img {
            width: 26px;
            height: 30px;
            margin-right: 10px;
          }
          .number {
            font-size: 20px;
          }
          .text {
            font-size: 10px;
          }
        }
      }
      .items-map{
        grid-row: span 2;
        
      }
      .items {
        display: inline-block;
        border: 1px solid rgb(52, 108, 172);
        margin: 10px;
        position: relative;
        .chart {
          width: 100%;
          height: calc(100% - 38px);
        }
        .title-wrapper {
          padding: 10px;
          background: rgb(42, 64, 132);
          p {
            background: linear-gradient(
              0deg,
              #8be3f2 0%,
              #90cae7 37.109375%,
              #e0f0f8 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 500;
          }
        }
      }
    }
  }
  .disabled {
    color: #c0c4cc !important;
    cursor: not-allowed !important;
  }
}
</style>